<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧经典小程序 - 优化版原型</title>
    <style>
        :root {
            /* 主题色系 */
            --buddhism-primary: #D4AF37;
            --buddhism-secondary: #8B4513;
            --buddhism-accent: #FFD700;
            --buddhism-light: #FFF8DC;
            --buddhism-gradient: linear-gradient(135deg, var(--buddhism-primary), var(--buddhism-secondary));

            --taoism-primary: #2F4F4F;
            --taoism-secondary: #008B8B;
            --taoism-accent: #00CED1;
            --taoism-light: #E0FFFF;
            --taoism-gradient: linear-gradient(135deg, var(--taoism-primary), var(--taoism-secondary));

            --zen-primary: #696969;
            --zen-secondary: #A9A9A9;
            --zen-accent: #D3D3D3;
            --zen-light: #F5F5F5;
            --zen-gradient: linear-gradient(135deg, var(--zen-primary), var(--zen-secondary));

            /* 基础颜色 */
            --text-primary: #333333;
            --text-secondary: #666666;
            --background: #FFFFFF;
            --border: #E5E5E5;
            --shadow: rgba(0, 0, 0, 0.1);
            
            /* 中性色 */
            --gray-50: #F9FAFB;
            --gray-100: #F3F4F6;
            --gray-200: #E5E7EB;
            --gray-300: #D1D5DB;
            --gray-400: #9CA3AF;
            --gray-500: #6B7280;
            --gray-600: #4B5563;
            --gray-700: #374151;
            --gray-800: #1F2937;
            --gray-900: #111827;
            
            /* 功能色 */
            --success: #10B981;
            --warning: #F59E0B;
            --error: #EF4444;
            --info: #3B82F6;
            
            /* 阴影 */
            --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
            --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
            --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
            
            /* 动画 */
            --transition-base: all 0.3s ease;
            --transition-smooth: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            --transition-bounce: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            
            /* 间距 */
            --spacing-xs: 4px;
            --spacing-sm: 8px;
            --spacing-md: 16px;
            --spacing-lg: 24px;
            --spacing-xl: 32px;
            
            /* 圆角 */
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --radius-xl: 24px;
        }

        /* 重置样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }

        body {
            background-color: #F0F2F5;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 2rem;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .page-title {
            text-align: center;
            margin-bottom: 2rem;
            color: var(--text-primary);
            font-size: 2rem;
        }

        .prototype-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            padding: 1rem;
        }

        .phone-frame {
            background: var(--background);
            border-radius: 2rem;
            box-shadow: 0 10px 30px var(--shadow);
            overflow: hidden;
            position: relative;
            aspect-ratio: 9/16;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.6s ease forwards;
        }

        .phone-frame[style*="--delay"] {
            animation-delay: var(--delay);
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .status-bar {
            background: var(--text-primary);
            color: white;
            padding: 0.5rem 1rem;
            font-size: 0.9rem;
            text-align: center;
        }

        .screen {
            height: calc(100% - 2rem);
            overflow-y: auto;
            padding: 1rem;
        }

        /* 增强卡片样式 */
        .enhanced-card {
            background: var(--background);
            border-radius: 1rem;
            padding: 1rem;
            margin-bottom: 1rem;
            box-shadow: 0 4px 12px var(--shadow);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .enhanced-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px var(--shadow);
        }

        /* 搜索栏样式 */
        .search-bar {
            margin-bottom: 1.5rem;
        }

        .search-input {
            display: flex;
            align-items: center;
            background: var(--zen-light);
            border-radius: 0.5rem;
            padding: 0.5rem;
            margin-bottom: 0.5rem;
        }

        .search-input input {
            border: none;
            background: none;
            flex: 1;
            margin-left: 0.5rem;
            font-size: 1rem;
            outline: none;
        }

        .search-tags {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
        }

        .tag {
            background: var(--zen-light);
            padding: 0.25rem 0.75rem;
            border-radius: 1rem;
            font-size: 0.8rem;
            color: var(--text-secondary);
            transition: background-color 0.3s ease;
        }

        .tag:hover {
            background: var(--zen-accent);
            color: var(--text-primary);
        }

        /* 阅读器样式 */
        .enhanced-reader {
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .reader-header {
            padding: 1rem;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .enhanced-reader-content {
            flex: 1;
            padding: 1rem;
            overflow-y: auto;
        }

        .text-block {
            margin-bottom: 2rem;
            position: relative;
        }

        .text-block .text {
            line-height: 1.8;
            margin-bottom: 1rem;
        }

        .annotation-marks {
            position: absolute;
            right: 0;
            top: 0;
        }

        .mark {
            display: inline-block;
            width: 24px;
            height: 24px;
            background: var(--buddhism-light);
            border-radius: 50%;
            text-align: center;
            line-height: 24px;
            font-size: 0.8rem;
            color: var(--buddhism-primary);
            cursor: pointer;
            transition: transform 0.3s ease;
        }

        .mark:hover {
            transform: scale(1.1);
        }

        /* 社区页样式 */
        .tab-bar {
            display: flex;
            justify-content: space-around;
            padding: 0.5rem;
            margin-bottom: 1rem;
        }

        .tab {
            padding: 0.5rem 1rem;
            border-radius: 1rem;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .tab.active {
            background: var(--taoism-light);
            color: var(--taoism-primary);
        }

        .enhanced-post {
            background: var(--background);
            border-radius: 1rem;
            padding: 1rem;
            margin-bottom: 1rem;
            box-shadow: 0 2px 8px var(--shadow);
        }

        .post-header {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }

        .post-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--zen-light);
            margin-right: 0.5rem;
        }

        .post-tag {
            background: var(--taoism-light);
            color: var(--taoism-primary);
            padding: 0.25rem 0.5rem;
            border-radius: 0.5rem;
            font-size: 0.8rem;
            margin-left: auto;
        }

        /* 个人中心样式 */
        .enhanced-profile {
            padding: 1rem;
        }

        .profile-header {
            display: flex;
            align-items: center;
            margin-bottom: 2rem;
        }

        .profile-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: var(--zen-light);
            margin-right: 1rem;
        }

        .level-badge {
            background: var(--buddhism-light);
            padding: 0.5rem;
            border-radius: 0.5rem;
            margin-top: 0.5rem;
        }

        .profile-stats {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1rem;
            margin-bottom: 2rem;
        }

        .stat-card {
            background: var(--background);
            padding: 1rem;
            border-radius: 1rem;
            text-align: center;
            box-shadow: 0 2px 8px var(--shadow);
        }

        .trend {
            display: inline-block;
            padding: 0.25rem 0.5rem;
            border-radius: 0.5rem;
            font-size: 0.8rem;
            margin-top: 0.5rem;
        }

        .trend.up {
            background: #E6F4EA;
            color: #34A853;
        }

        .menu-list {
            background: var(--background);
            border-radius: 1rem;
            overflow: hidden;
        }

        .menu-item {
            display: flex;
            align-items: center;
            padding: 1rem;
            border-bottom: 1px solid var(--border);
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .menu-item:last-child {
            border-bottom: none;
        }

        .menu-item:hover {
            background: var(--zen-light);
        }

        .menu-icon {
            margin-right: 1rem;
            font-size: 1.2rem;
        }

        .arrow {
            margin-left: auto;
            color: var(--text-secondary);
        }

        /* 动画效果 */
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        .animate-fade-in {
            opacity: 0;
            animation: fadeIn 0.6s ease forwards;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .prototype-grid {
                grid-template-columns: 1fr;
            }

            .phone-frame {
                max-width: 400px;
                margin: 0 auto;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="page-title animate-fade-in">智慧经典小程序 - 优化版原型</h1>

        <div class="prototype-grid">
            <!-- 首页 -->
            <div class="phone-frame animate-fade-in">
                <div class="status-bar">首页</div>
                <div class="screen home-screen">
                    <!-- 搜索栏 -->
                    <div class="enhanced-card search-bar">
                        <div class="search-input">
                            <i class="icon-search">🔍</i>
                            <input type="text" placeholder="搜索经典、章节、主题" />
                        </div>
                        <div class="search-tags">
                            <span class="tag">道德经</span>
                            <span class="tag">心经</span>
                            <span class="tag">金刚经</span>
                        </div>
                    </div>

                    <!-- 今日推荐 -->
                    <div class="enhanced-card daily-card" style="--gradient: var(--taoism-gradient)">
                        <div class="card-header">
                            <h3>今日经典</h3>
                            <span class="date">2024.03.15</span>
                        </div>
                        <div class="card-content">
                            <p class="classical-text">道可道，非常道。名可名，非常名。</p>
                            <p class="modern-text">可以说出的"道"，就不是永恒的"道"。</p>
                            <div class="source">——《道德经》第一章</div>
                        </div>
                        <button class="enhanced-button">开始阅读</button>
                    </div>

                    <!-- 分类导航 -->
                    <div class="category-grid">
                        <div class="enhanced-card category-item" style="--gradient: var(--buddhism-gradient)">
                            <i class="icon">🏛️</i>
                            <span>佛教经典</span>
                            <small>138部</small>
                        </div>
                        <div class="enhanced-card category-item" style="--gradient: var(--taoism-gradient)">
                            <i class="icon">⚡️</i>
                            <span>道教经典</span>
                            <small>108部</small>
                        </div>
                        <div class="enhanced-card category-item" style="--gradient: var(--zen-gradient)">
                            <i class="icon">🧘</i>
                            <span>禅修指南</span>
                            <small>66部</small>
                        </div>
                    </div>

                    <!-- 继续阅读 -->
                    <div class="section-header">
                        <h3>继续阅读</h3>
                        <span class="view-all">查看全部</span>
                    </div>
                    <div class="reading-list">
                        <div class="enhanced-card reading-item">
                            <div class="book-cover" style="background-image: url('path/to/cover.jpg')"></div>
                            <div class="book-info">
                                <h4>道德经</h4>
                                <div class="progress-bar">
                                    <div class="progress" style="width: 35%"></div>
                                </div>
                                <span class="progress-text">已读35%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 阅读页 -->
            <div class="phone-frame animate-fade-in" style="--delay: 0.2s">
                <div class="status-bar">阅读</div>
                <div class="screen reader-screen">
                    <div class="enhanced-reader">
                        <div class="reader-header">
                            <h3>第一章</h3>
                            <div class="chapter-nav">
                                <button class="nav-button">上一章</button>
                                <button class="nav-button">下一章</button>
                            </div>
                        </div>
                        <div class="enhanced-reader-content">
                            <div class="text-block original">
                                <p class="text">道可道，非常道。名可名，非常名。</p>
                                <div class="annotation-marks">
                                    <span class="mark" style="left: 20px; top: 10px">注</span>
                                </div>
                            </div>
                            <div class="text-block translation">
                                <p class="text">可以说出的"道"，就不是永恒的"道"。可以叫出的"名"，就不是永恒的"名"。</p>
                            </div>
                        </div>
                        <div class="enhanced-reader-tools">
                            <button class="tool-button">📖</button>
                            <button class="tool-button">🎨</button>
                            <button class="tool-button">📝</button>
                            <button class="tool-button">🔊</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 社区页 -->
            <div class="phone-frame animate-fade-in" style="--delay: 0.4s">
                <div class="status-bar">修学社区</div>
                <div class="screen community-screen">
                    <div class="enhanced-card tab-bar">
                        <div class="tab active">推荐</div>
                        <div class="tab">问答</div>
                        <div class="tab">共修</div>
                    </div>

                    <div class="post-list">
                        <div class="enhanced-post">
                            <div class="post-header">
                                <div class="post-avatar"></div>
                                <div class="post-info">
                                    <h4>张三</h4>
                                    <span class="time">2小时前</span>
                                </div>
                                <div class="post-tag">道德经</div>
                            </div>
                            <div class="post-content">
                                <p>今日读《道德经》有感：无为而治，方能治大国...</p>
                                <div class="post-images">
                                    <div class="image-grid">
                                        <div class="image-item"></div>
                                        <div class="image-item"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="post-actions">
                                <button class="action-button">
                                    <i class="icon">👍</i>
                                    <span>12</span>
                                </button>
                                <button class="action-button">
                                    <i class="icon">💬</i>
                                    <span>8</span>
                                </button>
                                <button class="action-button">
                                    <i class="icon">↗️</i>
                                    <span>分享</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 个人中心 -->
            <div class="phone-frame animate-fade-in" style="--delay: 0.6s">
                <div class="status-bar">个人中心</div>
                <div class="screen profile-screen">
                    <div class="enhanced-profile">
                        <div class="profile-header">
                            <div class="profile-avatar"></div>
                            <div class="profile-info">
                                <h3>张三</h3>
                                <div class="level-badge">
                                    <span class="level">修学者 Lv.3</span>
                                    <div class="progress-bar">
                                        <div class="progress" style="width: 75%"></div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="profile-stats">
                            <div class="stat-card">
                                <h2>28</h2>
                                <small>学习天数</small>
                                <div class="trend up">+2</div>
                            </div>
                            <div class="stat-card">
                                <h2>5</h2>
                                <small>完成经典</small>
                                <div class="trend up">+1</div>
                            </div>
                            <div class="stat-card">
                                <h2>36</h2>
                                <small>笔记数量</small>
                                <div class="trend up">+3</div>
                            </div>
                        </div>

                        <div class="enhanced-card menu-list">
                            <div class="menu-item">
                                <div class="menu-icon">📝</div>
                                <span>我的笔记</span>
                                <i class="arrow">></i>
                            </div>
                            <div class="menu-item">
                                <div class="menu-icon">⭐️</div>
                                <span>收藏经典</span>
                                <i class="arrow">></i>
                            </div>
                            <div class="menu-item">
                                <div class="menu-icon">📊</div>
                                <span>学习报告</span>
                                <i class="arrow">></i>
                            </div>
                            <div class="menu-item">
                                <div class="menu-icon">⚙️</div>
                                <span>设置</span>
                                <i class="arrow">></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html> 